<template>
  <!-- 招标任务管理页 -->
  <div class="tenderTaskMngPage">
    <div class="headInfoBox SourceHanSansMedium m-b20 d-flex a-center">
      <span class="title">待派发的招标任务</span>
			<el-divider direction="vertical"/>
      <span class="numStyle">数量：{{ state.allotToList.length }}</span>
    </div>
    <div class="contentBox m-b50">
      <div class="boxStyle leftBox m-r30">
        <div
          class="left_b_item m-b10 d-flex"
          v-for="(v, i) in state.allotToList"
          :key="v.tenderTaskId"
        >
          <div class="index m-r5">
            {{ i + 1 }}
          </div>
          <div class="title_name">
            <div class="name d-flex" style="margin-bottom: 10px;">
              <div class="titleStyle">《{{ v.taskName || 暂无 }}》</div>
              <!-- <div>
                  <el-button v-if="v.isPlan == 1">拟计划</el-button>
                </div> -->
            </div>
            <div class="name_2" style="margin-top: 6px;">《{{ v.projectName }}》</div>
          </div>
          <div class="allocation">
            <el-button @click="getAllotUsers(v.tenderTaskId)">
              <svg-icon icon-class="project-detail-icon-left_2" class="icon m-r5" />
              分配责任人</el-button
            >
          </div>
        </div>
      </div>
      <div class="boxStyle rightBox">
        <div class="statisticsBox">
          <div class="staticsItemBox" v-for="(n, i) in staticsDataArr" :key="i">
            <div class="itemLeftBox">
              <svg-icon :icon-class="n.icon" class="icon" />
            </div>
            <div class="itemRightBox p-l20">
              <div class="numBox SourceHanSansMedium">{{ state[n.num] }}</div>
              <div class="titleBox">{{ n.title }}</div>
            </div>
          </div>
        </div>
        <div class="infoBox m-b20">
          当前部门执行端人数：{{ state.deptUserNum || 0 }}

					<el-radio
						v-model="state.radio"
						:label="1"
						class="m-l20"
						@click.prevent="radioChange('radio', state.radio)"
						>隐藏已离职员工</el-radio
					>
				</div>
				<div class="cardBox" style="margin-top: -10px;">
					<div
						v-for="(n, i) in state.userList"
						:key="i"
						class="cardItemBox m-b20 cursor"
						:class="n.clickFlag ? 'cardActive' : 'cardDefault'"
						@click="itemClick(i, n)"
					>
						<div class="layerHover" v-if="n.clickFlag">
							<svg-icon icon-class="project-detail-icon-hover" class="icon"  />
						</div>
						<div class="headerBox d-flex a-center"
								 :style="{background:
								 n.clickFlag?'linear-gradient(90deg, #FFFAF3 0%, #FEFFFC 100%)':''}">
							<div class="name" style="margin-left: 14px;">
								<svg-icon :icon-class="n.clickFlag?'user-icon-2':'project-detail-icon-user'" class="headerBox-icon" :fill="'#ccc'" />
								<span class="userName m-l5" :style="{color:n.clickFlag?'#B29A8D':'#1A1A1A'}">{{ n.userName }}</span>
							</div>
						</div>
						<div class="post">
							<svg-icon icon-class="gw-icon" class="iconStyle m-r5" />
							<span class="labelStyle">岗位:</span>
							<span class="valueStyle m-l5">{{ n.positionName }}</span>
						</div>
						<div class="post">
							<svg-icon icon-class="project-icon" class="iconStyle m-r5" />
							<span class="labelStyle">当前负责项目数:</span>
							<span class="valueStyle m-l5">{{ n.taskNum }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="searchBox">
			<el-form :inline="true" :model="state" class="demo-form-inline">
				<el-form-item label="搜索">
					<el-input
						v-model="state.keywords"
						class="searchInput"
						clearable
						placeholder="根据招标项目任务名称或编号搜索"
					/>
				</el-form-item>
				<el-form-item label="项目状态">
					<el-select
						v-model="state.taskStatus"
						class="w-140"
						placeholder="全部"
					>
						<el-option
							v-for="item in taskStatusOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="招标项目类别">
					<el-select
						v-model="state.projectTypeExplain"
						class="w-140"
						placeholder="全部"
					>
						<el-option
							v-for="item in state.projectTaskList"
							:key="item.projectTypeId"
							:label="item.typeName"
							:value="item.projectTypeId"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="招标(比选方式)">
					<el-select
						class="w-140"
						v-model="state.tenderTypeExplain"
						placeholder="全部"
					>
						<el-option
							v-for="item in competitiveBiddingStatusOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-button
						color="#FF7B50"
						style="color: #fff"
						type="primary"
						@click="getPageList"
						>查询</el-button
					>
					<el-button color="#F0F0F0" @click="doReset">重置</el-button>
					<el-divider direction="vertical" class="searchDivider" />
					<div
						class="screen-button d-flex a-center j-center"
						:style="{
							'--screen-button-border-color':
								state.isHideComplete == 1 ? '#fc7037' : '#CCCCCC',
						}"
						style="margin-left: auto"
					>
						<el-radio
							v-model="state.isHideComplete"
							:label="1"
							@click.prevent="
								radioChange('isHideComplete', state.isHideComplete)
							"
							>隐藏已完结项目</el-radio
						>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button
							color="#7D7D9A"
							style="color: #fff;width: 150px;"
							@click="toPath('查看招标项目台账')"
					>
						<div class="d-flex a-center j-center">
							<svg-icon icon-class="tender-task-icon-1" class="m-r5"/>
							<span>查看招标项目台账</span>
						</div>
					</el-button
					>
				</el-form-item>
			</el-form>
		</div>

    <public-table
      class="m-t20"
      index
      :page="page"
			:header-cell-style="{'background':'#f7f7fa'}"
			border
      :tableData="state.tableData"
      :tableOption.sync="tableOption"
      @page-change="onPageChange"
    >
      <template #operation="scope">
        <el-button
          color="#FF7B50"
          size="small"
          style="color: #fff"
          @click="toPath('查看详情', scope.row)"
          type="primary"
          >查看详情</el-button
        >
      </template>
      <template #taskStatus="scope">
        <span v-for="v in taskStatusOptions" :key="v.projectTypeId">
          <span :style="{color: v.color}" v-if="v.value == scope.row.taskStatus">{{ v.label }}</span>
        </span>
      </template>
      <template #projectTypeExplain="scope">
        <span v-for="v in state.projectTaskList" :key="v.projectTypeId">
          <span v-if="v.projectTypeId == scope.row.projectTypeExplain">{{
            v.typeName
          }}</span>
        </span>
      </template>
      <template #tenderTypeExplain="scope">
        <span
          v-for="v in competitiveBiddingStatusOptions"
          :key="v.projectTypeId"
        >
          <span v-if="v.value == scope.row.tenderTypeExplain">{{
            v.label
          }}</span>
        </span>
      </template>
    </public-table>

    <public-dialog
      :title="'招标项目任务派发'"
      :width="'30%'"
      v-model:visible="state.visible"
      @onConfirm="onConfirm"
    >
      <div class="public-dialog-content d-flex j-center a-center">
        <span class="m-r10">请选择任务的实施人员</span>
        <el-select v-model="state.allotUserId">
          <el-option
            v-for="(item, index) in state.allotUsers"
            :key="index"
            :value="item.userId"
            :label="item.userName"
          ></el-option>
        </el-select>
      </div>
    </public-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElDivider,
  ElRow,
  ElCol,
  ElRadio,
  ElMessage
} from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import PublicTable from '@/components/PublicTable.vue'
import { biddingTaskApi, processApi } from '@/api/biddingProject'
import PublicDialog from '@/components/PublicDialog.vue'
import {
  competitiveBiddingStatusOptions,
  taskStatusOptions
} from '@/common/dict/dictCollect'

const store = useStore()
const router = useRouter()
const state = reactive({
  radio: 1, // 0否 1是
  isHideComplete: 1,
  tableData: [],
  allotToList: [],
  userList: [],
  planNum: 0,
  allotToNum: 0,
  allotedNum: 0,
  deptUserNum: 0,
  visible: false,
  allotUserId: '',
  allotUsers: [],
  projectTaskList: store.state.common.tenderType,
  projectTaskId: '',
  keywords: '',
  taskStatus: '',
  projectTypeExplain: '',
  tenderTypeExplain: '',
  deptId: '',
  responsibleUserId: ''
})
const doReset = () => {
  state.keywords = ''
  state.taskStatus = ''
  state.projectTypeExplain = ''
  state.projectTypeExplain = ''
  state.tenderTypeExplain = ''
  state.deptId = ''
  state.isHideComplete = 1
  state.responsibleUserId = ''
  state.userList = state.userList.map((v) => {
    v.clickFlag = false
    return v
  })

  getPageList()
}

const radioChange = (key, value) => {
  if (value === 1) {
    state[key] = 0
  } else {
    state[key] = 1
  }
  if (key == 'isHideComplete') {
    getPageList()
  } else {
    getDeptUserList()
  }
}

const staticsDataArr = reactive([
  // {
  // 	img: "",
  // 	num: 'planNum',
  // 	title: "拟计划招标任务数",
  // 	icon: "project-detail-icon-edit",
  // },
  {
    img: '',
    num: 'allotToNum',
    title: '待分配招标任务数',
    icon: 'project-detail-icon-left_'
  },
  {
    img: '',
    num: 'allotedNum',
    title: '部门当前实施任务数',
    icon: 'project-detail-icon-success_'
  }
])

const itemClick = (index, item) => {
  state.responsibleUserId = item.userId
  state.userList.map((n, i) => {
    if (n.userId === item.userId && !n.clickFlag) {
      n.clickFlag = true
    } else {
      n.clickFlag = false
    }
  })
  if (state.userList.findIndex((v) => v.clickFlag) == -1) {
    state.responsibleUserId = ''
  }
  getPageList()
}
const tableOption = ref([
  { label: '任务执行状态', prop: 'taskStatus', slot: true, minWidth: 120 },
  { label: '招标任务 ', prop: 'taskName', minWidth: 120 },
  { label: '所属项目 ', prop: 'projectName', minWidth: 120 },
  { label: '任务编号 ', prop: 'tenderTaskId', minWidth: 120 },
  { label: '责任部门 ', prop: 'deptName', minWidth: 120 },
  { label: '招标项目类别 ', prop: 'projectTypeExplain', slot: true, minWidth: 120 },
  { label: '招标（比选）方式 ', prop: 'tenderTypeExplain', slot: true, minWidth: 180 },
  {
    label: '控制价',
    prop: 'tenderAmount',
    minWidth: 100,
    formatter: (val) => {
      if (!val) {
        return '-';
      }
      return val + ' 元';
    }
  },
  {
    label: '任务量',
    prop: 'totalFlowNum',
    minWidth: 100,
    formatter: (val, row) => {
      return row.completeFlowNum + '/' + row.totalFlowNum
    }
  },
  { label: '当前节点 ', prop: 'currentFlowNodeName', minWidth: 120, },
  { label: '任务创建日期 ', prop: 'createTime', minWidth: 150 },
  { label: '实际完成日期', prop: 'realEndTime', minWidth: 150 },
  { label: '操作', prop: 'operation', slot: true, width: 130, fixed: "right" }
]);

const onPageChange = (e) => {
  page.current = e.page
  page.size = e.limit
  getPageList()
}

const page = reactive({
  total: 0,
  current: 1,
  size: 50
})

const getBoard = () => {
  biddingTaskApi.getBoard().then((res) => {
    if (res.code == 200) {
      state.planNum = res.data.planNum
      state.allotToNum = res.data.allotToNum
      state.allotedNum = res.data.allotedNum
      state.deptUserNum = res.data.deptUserNum
    }
  })
}
const onConfirm = () => {
  if (state.allotUserId.trim() === '') {
    ElMessage.warning('请选择实施人员!')
    return
  }
  tenderTaskAllot({
    userId: state.allotUserId,
    projectTaskId: state.projectTaskId
  })
}

const tenderTaskAllot = (parms) => {
  biddingTaskApi.allot(parms).then((res) => {
    if (res.code === '200') {
      ElMessage.success('指定实施人员成功!')
      state.visible = false
      getDeptUserList()
      getAllotToList()
      getPageList()
    }
  })
}

const getAllotToList = () => {
  biddingTaskApi.getAllotToList().then((res) => {
    if (res.code == 200) {
      state.allotToList = res.data
    }
  })
}
const getPageList = () => {
  const parms = {
    pageNum: page.current,
    pageSize: page.size,
    param: {
      keywords: state.keywords,
      taskStatus: state.taskStatus,
      projectTypeExplain: state.projectTypeExplain,
      tenderTypeExplain: state.tenderTypeExplain,
      deptId: state.deptId,
      isHideComplete: state.isHideComplete,
      responsibleUserId: state.responsibleUserId
    }
  }
  biddingTaskApi.getPageList(parms).then((res) => {
    if (res.code == 200) {
      state.tableData = res.data.content
      page.total = res.data.totalSize
    }
  })
}
const getAllotUsers = (projectTaskId) => {
  state.projectTaskId = projectTaskId
  biddingTaskApi.getAllotUsers(projectTaskId).then((res) => {
    if (res.code == 200) {
      state.allotUsers = res.data
      state.visible = true
    }
  })
}
const getDeptUserList = () => {
  biddingTaskApi.getDeptUserList(state.radio).then((res) => {
    if (res.code == 200) {
      state.userList = res.data.map((v, i) => {
        const obj = {
          ...v,
          clickFlag: true
        }
        obj.clickFlag = false

        // if(i === 0) {
        //     obj.clickFlag = true
        // } else {
        //   obj.clickFlag = false
        // }
        return obj
      })
    }
  })
}

const getTypeList = () => {
  if (store.state.common.tenderType.length === 0) {
    processApi.getTypeList().then((res) => {
      if (res.code == 200) {
        state.projectTaskList = res.data
        store.commit('set_tenderType', res.data)
      }
    })
  } else {
    state.projectTaskList = store.state.common.tenderType
  }
}

const toPath = (type, row) => {
  console.log(row)
  switch (type) {
    case '查看详情':
      router.push({
        path:
          '/tender/taskManage/taskExecuteManageDetail/tenderTaskId=' +
          row.tenderTaskId
      })
      break
    case '查看招标项目台账':
      router.push({
        path: '/tender/ledger/ledgerProjectView/ledgerId=1'
      })
      break

    default:
      break
  }
}

// watch(
// 	() => state.radio,
// 	(value) => {
// 		getDeptUserList();
// 	}
// );

onMounted(() => {
  getBoard()
  getAllotToList()
  getDeptUserList()
  getPageList()
  getTypeList()
})
</script>

<style lang="scss" scoped>
.labelStyle{
	font-size: 12px;
	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
	font-weight: 400;
	color: #666666;
	line-height: 18px;
}

.valueStyle{
	font-size: 14px;
	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
	font-weight: 400;
	color: #1A1A1A;
}

.userName{
	font-size: 14px;
	font-family: SourceHanSansCN-Bold, SourceHanSansCN;
	font-weight: bold;
}

.iconStyle{
	width: 16px;
	height: 16px;
	margin-left: 14px;
}

.title{
	font-size: 16px;
	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	font-weight: 500;
	color: #666666;
}

.numStyle{
	font-size: 16px;
	font-family: SourceHanSansCN-Bold, SourceHanSansCN;
	font-weight: bold;
	color: #5F5F83;
}

.titleStyle{
	font-size: 14px;
	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
	font-weight: 400;
	color: #1A1A1A;
}

.el-form-item{
	width: auto !important;
}
.tenderTaskMngPage {
	.w-140 {
		width: 140px;
	}
	.searchDivider {
		height: 30px;
		margin: 5px 15px;
		// margin-right: auto;
	}
	.headInfoBox {
		color: #666666;
		.numBox {
			color: var(--el-color-primary);
		}
	}
	.contentBox {
		display: flex;
		.boxStyle {
			flex: 1;
			height: 505px;
			padding: 30px;
			border-radius: 10px;
			border: 1px solid #e3e7f1;
		}
		.leftBox {
			overflow-y: auto;
			.left_b_item {
				justify-content: space-between;
				.index {
					height: 30px;
					line-height: 30px;
				}
				.title_name {
					.name {
						padding: 0 20px;
						justify-content: space-between;
						width: 523px;
						height: 30px;
						border-radius: 10px;
						line-height: 30px;
						background-color: #FAFAFC;
						.el-button {
							width: 60px;
							height: 22px;
							background: #7d7d9a;
							border-radius: 2px;
							color: #fff;
							border: 0;
							margin-top: -8px;
						}
					}
					.name_2 {
						padding: 0 20px;
						font-size: 12px;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666666;
          }
        }
        .allocation {
          .el-button {
            width: 113px;
            height: 30px;
            color: #fff;
            background: #7D7D9A;
            border-radius: 6px;
						border-color: #7D7D9A;
          }
        }
      }
    }
    .rightBox {
      .statisticsBox {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-bottom: 24px;
        .staticsItemBox {
          width: 200px;
          height: 52px;
          box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.03),
            -1px -1px 3px 0px rgba(0, 0, 0, 0.01);
          border-radius: 8px;
          display: flex;
          .itemLeftBox {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .itemRightBox {
            flex: 3;
            display: flex;
            flex-direction: column;
            .numBox {
              flex: 1;
              color: $title-big-color;
              display: flex;
              align-items: center;
            }
            .titleBox {
              flex: 1;
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #999999;
            }
          }
        }
      }
      .cardBox {
        height: 320px;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        .cardItemBox {
          width: 31%;
          height: 94px;
          border-radius: 12px;
					margin-bottom: 12px;
          //padding: 14px;
          margin: 10px calc((100% - 31% * 3) / 3 / 2);
					.headerBox{
						width: 100%;
						height: 36px;
						background: linear-gradient(90deg, #F7FAFD 0%, #FEFFFC 100%);
						border-radius: 12px 12px 0px 0px;
						.headerBox-icon{
							width: 16px;
							height: 16px;
						}
					}
          .post {
            font-size: 14px;
            margin-top: 5px;
            font-weight: 400;
            color: #1a1a1a;
            line-height: 21px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
					}
				}
				.cardActive {
					position: relative;
					overflow: hidden;
					//border: 0.5px solid var(--el-color-primary);
					border: 0.5px solid #D4AE85;
					box-shadow: 0px 2PX 9PX 0px rgba(212,174,133,0.21);
					.layerHover {
						position: absolute;
						width: 30px;
						height: 20px;
						background-color: var(--el-color-primary);
						top: 0;
						right: 0;
						border-radius: 0 0 0 6px;
						.icon {
							position: absolute;
							top: 0%;
							left: 6px;
							width: 17px;
							height: 17px;
							text-align: center;
						}
					}
				}
				.cardDefault {
					position: relative;
					border: 0.5px solid #f2f2f2;
				}
			}
		}
	}
	.searchBox {
		.demo-form-inline {
			margin-bottom: 6px;
		}
		.iconStyle {
			width: 20px;
			height: 20px;
		}
	}
}
</style>
